<template>
  <div class="panel">
    <h2 class="panel__title">数据看板</h2>
    <div class="panel__container">
      <div class="modules-1">
        <div v-for="item in blockList" :key="item.id">
          <span>{{ item.name }}</span>
          <span>{{ item.price }}</span>
          <div>
            <div><span></span>+{{ item.percent }}</div>
            <img src="@/assets/svg/brokenLine.svg" alt="" />
          </div>
        </div>
        <div>
          <ChartComp :option="option1" :key="1" />
        </div>
      </div>
      <div class="modules-2">
        <ChartComp :option="option2" :key="2" />
      </div>
      <div class="modules-3">
        <el-table :data="tableData" height="100%" style="width: 100%">
          <el-table-column prop="date" label="Date" width="150" />
          <el-table-column prop="name" label="Name" width="150" />
          <el-table-column prop="state" label="State" width="160" />
          <el-table-column prop="city" label="City" width="180" />
          <el-table-column prop="address" label="Address" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onBeforeUnmount } from 'vue'
import ChartComp from './components/ChartComp.vue'
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036'
  }
]
const blockList = ref([
  {
    id: 1,
    name: '销售额',
    percent: 22.3,
    price: 666.6
  },
  {
    id: 2,
    name: '订单总数',
    percent: 22.3,
    price: 999
  },
  {
    id: 3,
    name: '用户量',
    percent: 22.3,
    price: 7399
  },
  {
    id: 4,
    name: '商品总数',
    percent: 22.3,
    price: 3142
  }
])
const colors = ['#5470C6', '#EE6666']
const option1 = reactive({
  color: colors,
  tooltip: {
    trigger: 'none',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {},
  grid: {
    top: 70,
    bottom: 50
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[1]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params: any) {
            return (
              'Precipitation  ' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            )
          }
        }
      },

      // prettier-ignore
      data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params: any) {
            return (
              'Precipitation  ' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            )
          }
        }
      },

      // prettier-ignore
      data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Precipitation(2015)',
      type: 'line',
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: 'Precipitation(2016)',
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
    }
  ]
})
const option2 = reactive({
  title: {
    text: 'Nightingale Chart',
    subtext: 'Fake Data',
    left: 'center',
    top: '5%'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '5%',
    icon: 'circle',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
})
const evtSource = new EventSource('http://localhost:8260/events')
evtSource.onmessage = function (event: any) {
  console.log(event.data)
}
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
  evtSource.close()
})
</script>
<style lang="scss" scoped>
@mixin grid($gc, $gr, $gap: 20px) {
  display: grid;
  grid-template-columns: $gc;
  grid-template-rows: $gr;
  gap: $gap;
}

.panel {
  @include routerView();

  &__container {
    @include grid(2.5fr 1fr, 2fr 1fr);
    background-color: white;
    [class^='modules'] {
      box-shadow: 2px 2px 12px $color-gray-light;
      border-radius: 12px;
    }

    .modules-1 {
      box-shadow: none;
      @include grid(repeat(4, 1fr), 1fr 3fr);

      > div {
        color: #666;
        font-size: 16px;
        box-shadow: 2px 2px 12px $color-gray-light;
        @include boxPadding(20px);
        border-radius: 12px;
        @include flex(column, flex-start, space-between);

        > span:nth-child(2) {
          font-size: 26px;
          color: $color-dark;
        }

        > div {
          width: 100%;
          @include flex(row, center, space-between);

          > div {
            span {
              display: inline-block;
              width: 14px;
              height: 14px;
              background-color: aquamarine;
              border-radius: 4px;
              margin-right: 4px;
            }
          }
        }
      }

      > div:last-child {
        grid-column-start: span 4;
        overflow: hidden;
      }
    }

    .modules-2 {
      overflow: hidden;
    }

    .modules-3 {
      overflow: hidden;
      grid-column-start: span 2;
      padding: 20px;
    }
  }
}
</style>
